<template>
  <div class="home">
    <Playlist v-show="$route.path === '/playlist'"></Playlist>
    <Banner></Banner>
    <div class="g-bd">
      <div class="g-mn flex">
        <div class="g-mnc">
          <Recommended v-show="$route.path === '/home'"></Recommended>
          <Newdisc></Newdisc>
          <SongList></SongList>
        </div>
      <RightList />
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Banner from "@/components/home/Banner.vue";
import Recommended from "@/components/home/Recommended.vue";
import Playlist from "@/components/home/Playlist.vue";
import Newdisc from "@/components/home/Newdisc.vue";
import SongList from "@/components/home/SongList.vue";
import RightList from "@/components/home/RightList.vue";


export default {
  name: "Home",
  components: {
    // Banner,
    Recommended,
    Playlist,
    Banner,
    Newdisc,
    SongList,
    RightList,
  },
  data(){
    return{
       
    }
  },
  created(){
    localStorage.setItem('curPage',1)
  }
  
};
</script>



<style>
.n-rcmd {
  height: 523px;
}
.g-bd {
  background: url("../assets/images/wrap1.png") repeat-y 100% 100%;
}
.g-bd {
  width: 980px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
}
.g-mn {
  width: 100%;
}
.g-mnc {
  width: 730px;
}
.g-wrap {
  padding: 20px 20px 40px;
}
</style>